<template>
    <div class="hngkTitle">
        <div class="titleWord">
            <div class="upContent">
                <div class="upWord">海南概况</div>
                <div class="upBtns">
                    <div @click="changeGk">
                        <img
                            :class="{ active: !opacityState }"
                            src="/data/images/hngk/xia.png"
                            alt=""
                        />
                    </div>
                    <div @click="changeFx">
                        <img
                            :class="{ active: opacityState }"
                            src="/data/images/hngk/shang.png"
                            alt=""
                        />
                    </div>
                </div>
            </div>
            <div class="downContent">
                <i> Hainan Overview </i>
            </div>
        </div>
    </div>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    inject,
} from "vue";
import { useStore } from "vuex";
export default {
    setup() {
        const store = useStore();
        const opacityState = ref(false);
        function changeGk() {
            store.commit("changeHngkComponent", "Gk");
            opacityState.value = false;
        }
        function changeFx() {
            store.commit("changeHngkComponent", "Fx");
            opacityState.value = true;
        }
        onMounted(() => {});
        return {
            changeGk,
            changeFx,
            opacityState,
        };
    },
};
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .hngkTitle {
        position: absolute;
        left: vw(462);
        top: vh(128);
        width: vw(162);
        z-index: 3;

        .titleWord {
            .upContent {
                display: flex;

                .upWord {
                    font-size: vw(32);
                }

                .upBtns {
                    margin-left: vw(16);
                    margin-top: vw(5);
                    height: vh(45);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;

                    div {
                        img {
                            width: vw(16);
                            height: vw(15);
                            cursor: pointer;
                        }

                        .active {
                            opacity: 0.3;
                        }
                    }
                }
            }

            .downContent {
                font-size: vw(18);
                font-style: oblique;
                margin-top: vh(5);
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .hngkTitle {
        position: absolute;
        left: vw1(1050);
        top: vh(128);
        width: vw1(162);
        z-index: 3;
        .titleWord {
            .upContent {
                display: flex;
                .upWord {
                    font-size: vw1(32);
                }
                .upBtns {
                    margin-left: vw1(16);
                    margin-top: vw1(5);
                    height: vh(45);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    div {
                        img {
                            width: vw1(16);
                            height: vw1(15);
                            cursor: pointer;
                        }
                        .active {
                            opacity: 0.3;
                        }
                    }
                }
            }
            .downContent {
                font-size: vw1(18);
                font-style: oblique;
                margin-top: vh(5);
            }
        }
    }
}
</style>